<template>
  <div id="shoppinmgcart">
    <Header />
    <el-breadcrumb separator=">>" style="margin-left: 20px; font-size: 15px">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">购物车</a></el-breadcrumb-item>
    </el-breadcrumb>
    <el-col style="padding: 20px">
      <el-table
        :data="shoppingData"
        border
        style="width: 100%; text-align: center"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="货物名称" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.Image" alt="" />
            <span>{{ scope.row.goodsname }}</span></template
          >
        </el-table-column>
        <el-table-column prop="model" label="型号" align="center">
        </el-table-column>
        <el-table-column label="单价" align="center">
          <template slot-scope="scope">
            {{ scope.row.price }}/{{ scope.row.describe }}
          </template>
        </el-table-column>
        <el-table-column label="数量" align="center">
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.index"
              @change.native="changeNum"
              :min="1"
              :max="10"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <div id="u14722" class="ax_default line">
      <img id="u14722_img" class="img" src="../../assets/images/u14722.png" />
    </div>
    <div id="u14724" class="text">
      <el-button type="primary" id="u14725" @click="confirm()">结算</el-button>
    </div>
    <div id="u14726" class="ax_default label">
      <div id="u14727" class="text">
        <p><span>已选2种商品，共15车</span></p>
        <p><span>合计¥35000.00</span></p>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "@/components//Header.vue";
export default {
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      dialogVisible: false,
      num: "",
      shoppingData: [
        {
          goodsname: "预拌抹灰砂浆",
          model: "DPM16",
          number: "1车",
          operate: "删除",
          price: "¥6200.00",
          describe: "按合同价",
          Image: require("../../assets/images/u988.png"),
          index: 1,
        },
        {
          goodsname: "预拌抹灰砂浆",
          model: "DPM16",
          number: "1车",
          operate: "删除",
          price: "¥6200.00",
          describe: "按合同价",
          Image: require("../../assets/images/u988.png"),
          index: 1,
        },
        {
          goodsname: "预拌抹灰砂浆",
          model: "DPM16",
          number: "1车",
          operate: "删除",
          price: "¥6200.00",
          describe: "按合同价",
          Image: require("../../assets/images/u988.png"),
          index: 1,
        },
      ],
      multipleSelection: [],
    };
  },
  components: {
    Header,
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClick(row) {
      console.log(row);
    },
    changeNum(value) {
      console.log(value);
    },
    confirm(){
            window.location.href='/cconfirm' 
        }
  },
};
</script>
<style scoped src="../../style/shoppingcart.css">
</style>